<template>
  <div class="input-contain">
    <input
      type="text"
      placeholder="请输入你的任务，按回车键确认"
      v-model="title"
      @keyup.enter="add"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'Header',
  props: {
    addTodo: {
      type: Function,
      required: true,
    },
  },
  setup(props) {
    const title = ref('');
    const add = () => {
      const text = title.value;
      if (!text.trim()) {
        return;
      }
      const todo = {
        id: Date.now(),
        title: text,
        isCompleted: false,
      };
      props.addTodo(todo);
      title.value = '';
    };
    return {
      add,
      title,
    };
  },
});
</script>
<style scoped>
.input-contain {
  width: 30%;
  margin: 0 auto;
}
.input-contain input {
  width: 100%;
  height: 50px;
}
</style>
